<template>
  <div id="app">
    <a-input placeholder="请输入任务" class="my_ipt" 
     :value='inputValue'
     @change="handleInput"
    style="width:600px;margin-right:20px;margin-bottom:30px"></a-input>
    <a-button type="primary" @click="btnHandle">添加事项</a-button>

    <a-list bordered :dataSource="infoList" class="dt_list">
      <a-list-item slot="renderItem" slot-scope="item">
        <a-checkbox :checked='item.done'
         @change="(e)=>{
            cbStatusChanged(e,item.id)
          }">{{item.info}}</a-checkbox>
        <a slot="actions" @click="removeID(item.id)">删除</a>
      </a-list-item>

      <!-- footer区域 -->
      <div slot="footer" class="footer">
        <span>{{unDone}}条剩余</span>
        <a-button-group>
          <a-button  :type="view=='all'?'primary':'default'" 
          @click="changeList('all')">全部</a-button>
          <a-button :type="view=='undone'?'primary':'default'" 
          @click="changeList('undone')">未完成</a-button>
          <a-button :type="view=='done'?'primary':'default'"
           @click="changeList('done')">已完成</a-button>
        </a-button-group>
        <a @click="clean">清除已完成</a>
      </div>
    </a-list>
  </div>
</template>

<script>
 import {mapState,mapGetters} from 'vuex'
 export default {
   name: 'App',
   data() {
     return {
     }
   },
   created(){
     this.$store.dispatch('getList')
   },
   computed:{
     ...mapState(['inputValue','view']),
     ...mapGetters(['unDone','infoList'])
   },
   methods:{
     handleInput(e){
       console.log(e.target.value)
       this.$store.commit('setInput',e.target.value)
     },
     btnHandle(){
       if(this.inputValue.trim().length<=0){
         return this.$message.warning('文本框内容不能为空！')
       }
       this.$store.commit('addItem')
     },
     // 根据Id删除对应的任务事项
     removeID(id){
       this.$store.commit('removeItemId',id)
     },
     // 监听复选框选中状态变化的事件
     cbStatusChanged(e,id){
       console.log(e.target.checked)
       const param={
         id:id,
         status:e.target.checked
       }
       this.$store.commit('changeItem',param)
     },
     // 清除已完成的任务
     clean(){
       this.$store.commit('cleanDone')
     },
     changeList(key){
     this.$store.commit('viewKey',key)
    }
  }
 
 }



</script>

<style lang="less">
#app {
  padding: 30px;
  margin: 20px 200px;
}


.dt_list{
  width: 800px;
  margin-top: 10px;
}
.footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
